﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加dayjs到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加vue到全局 -->
    <script src="./publicJs/vue.global.prod.js"></script>
    <!-- 自动添加axios到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加Cookies到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加XLSX到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>
    <!-- 自动添加QRCode到全局 -->
    <script src="./publicJs/qrcode.min.js"></script>

    <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
    <!-- 自动添加ElementPlus到全局 -->
    <script src="./publicJs/element-plus.index.full.js"></script>
    <script src="./publicJs/index.iife.min.js"></script>
    <!-- 自动添加VXE到全局 -->
    <link rel="stylesheet" href="./publicJs/vxe/ui.style.min.css" />
    <link rel="stylesheet" href="./publicJs/vxe/table.style.min.css" />
    <script src="./publicJs/vxe/xe-utils.umd.min.js"></script>
    <script src="./publicJs/vxe/ui.index.umd.min.js"></script>
    <script src="./publicJs/vxe/table.index.umd.min.js"></script>

    <title>驱动器领料单</title>
  </head>

  <body>
    <div id="app">
      <div v-loading="loading">
        <vxe-button status="primary" content="点击打印" @click="printEvent"></vxe-button>
        <div>
          <div ref="topElRef">
            <div style="margin-bottom: 8px">
              <div style="display: flex; justify-content: space-between">
                <img
                  style="float: left; height: 50px; line-height: 28px"
                  src="http://172.18.59.193:9911/QDMES/CHER/web_mes_system/dist/img/驱动LOGO.jpeg"
                />

                <h1 style="padding: 0; margin: 0px">{{titleObj.title}}</h1>
                <div id="test"></div>
              </div>
              <div style="display: flex; justify-content: space-between">
                <div style="height: 28px; line-height: 28px">配送单号：{{ titleObj.applyNo }}</div>
                <!-- <div style="height: 28px; line-height: 28px">产线：{{ titleObj.cx }}</div> -->
                <div style="height: 28px; line-height: 28px">制单人：{{ titleObj.zdr }}</div>
              </div>
              <div style="display: flex; justify-content: space-between">
                <div style="height: 28px; line-height: 28px">制单时间：{{ titleObj.zdsj }}</div>
                <div style="height: 28px; line-height: 28px">配送时间：{{ titleObj.spsj }}</div>
                <!-- <div style="height: 28px; line-height: 28px">联系电话：10086</div> -->
              </div>
            </div>
          </div>
          <vxe-table border ref="table1Ref" :data="orderTableData" height="340">
            <vxe-column field="seq" title="序号" width="100" align="center"></vxe-column>
            <vxe-column field="ORDERNO" title="订单号" width="120" align="center"></vxe-column>
            <vxe-column field="MATCODE" title="物料号" width="120" align="center"></vxe-column>
            <vxe-column field="MATNAME" title="物料描述" align="center"></vxe-column>
            <vxe-column field="QTY" title="数量" width="160" align="center"></vxe-column>
            <vxe-column field="PLANDATE" title="排产日期" width="120" align="center"></vxe-column>
            <vxe-column field="PROSN" title="流水号" width="240" align="center"></vxe-column>
          </vxe-table>
          <vxe-table
            border
            ref="tableRef"
            height="400"
            class="marginTop10"
            :print-config="{}"
            :data="applyItemTableData"
            class="marginTop10"
          >
            <vxe-column field="seq" width="60" title="序号" align="center"></vxe-column>
            <vxe-column field="MATCODE" title="物料号" align="center"></vxe-column>
            <vxe-column field="MATNAME" title="描述" align="center"></vxe-column>
            <vxe-column field="QTY" title="数量" align="center"></vxe-column>
            <vxe-column field="SAPQTY" title="SAP库存" align="center"></vxe-column>
            <vxe-column field="KW" title="仓位" align="center"></vxe-column>
            <vxe-column field="WPNO" title="工位" align="center"></vxe-column>
          </vxe-table>

          <div ref="bottomElRef">
            <!-- <div style="margin-top: 30px; text-align: right">
              <div style="display: inline-block; width: 100%">
                <div style="float: left; width: 33.33%; height: 28px; line-height: 28px"></div>
                <div style="float: left; width: 33.33%; height: 28px; line-height: 28px">创建人：小徐</div>
                <div style="float: left; width: 33.33%; height: 28px; line-height: 28px">创建日期：2024-12-01</div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    const urlParams = new URLSearchParams(window.location.search)

    import myAxios from './myAxios/myAxios.js'
    import myAxiosWXPost from './myAxios/myAxiosWXPost.js'
    import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
    import v4 from './publicJs/uuidv4.js'
    const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue
    const { Bottom, Top, Right, Delete, Refresh, Calendar, Check, Search } = ElementPlusIconsVue

    import { GetMatCodeParamString } from './QDQZJH_JS/getMatCodeParamString.js'
    import { GetDataList2 } from './QDQZJH_JS/GetDataList2.js'
    const app = createApp({
      name: 'test',
      components: {},
      setup() {
        let loading = ref(false)
        // 假设当前URL为：https://example.com/?name=John&age=30&city=New+York

        // 获取单个参数值
        const applyNo = urlParams.get('applyNo') // 'John'
        let titleObj = ref({
          title: '安信数控车间配送单',
          applyId: '',
          applyNo: applyNo.split(','),
          zdr: '陈帅廷',
          zdsj: `yyyy/MM/dd HH:mm:ss`,
          spsj: 'yyyy/MM/dd HH:mm:ss',
        })

        const table1Ref = ref()
        const orderTableData = ref([])

        const tableRef = ref()
        const topElRef = ref()
        const bottomElRef = ref()
        const applyItemTableData = ref([])
        const printEvent = async () => {
          const $table = tableRef.value
          if ($table) {
            const printRest = await $table.getPrintHtml()
            const topEl = topElRef.value
            const bottomEl = bottomElRef.value
            const topHtml = topEl ? topEl.innerHTML : ''
            // console.log('topHtml :>> ', topHtml)
            const $table1 = table1Ref.value
            let orderHtml = (await $table1.getPrintHtml()).html
            // orderHtml = orderHtml.replace(/title="序号"/g, 'title="序号" style="width: 200px;" ')
            // console.log('orderHtml :>> ', orderHtml)
            const bottomHtml = bottomEl ? bottomEl.innerHTML : ''
            // $table
            //   .openPrint()
            //   .then((res1) => {
            //     console.log('res :>> ', res1)
            //   })
            //   .catch((err) => {
            //     console.log('err :>> ', err)
            //   })

            $table.print({
              title: '出货单据',
              // pageBreaks: [
              //   // 第一页
              //   {
              //     bodyHtml: printRest.html,
              //   },
              // ],
              showPageNumber: true,
              beforePrintMethod({ html }) {
                // console.log('html :>> ', html)
                // console.log('orderHtml :>> ', orderHtml)
                orderHtml += `<h1></h1>`
                orderHtml = orderHtml.replace(/title="序号"/g, 'title="序号" style="width: 200px;" ')
                html = html.replace(/title="序号"/g, 'title="序号" style="width: 80px;" ')
                let resultHtml = topHtml + orderHtml + html + bottomHtml
                // resultHtml = resultHtml.replace(/border="0"/g, 'border="1"')
                resultHtml = resultHtml.replace(
                  /class="vxe-table border--full is--print is--header" border="0" cellspacing="0" cellpadding="0"/g,
                  'border="2"',
                )
                // console.log('resultHtml :>> ', resultHtml)
                return resultHtml
              },
            })
          }
        }

        onMounted(async () => {
          let qrcodeText = `$PSD$${applyNo}$${applyNo.includes(',') ? '0' : '1'}$`
          new QRCode(`test`, {
            text: `$PSD$${applyNo}$1$`,
            width: 50,
            height: 50,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H, //纠错等级
          })
          let titleParam = `${titleObj.value.applyNo.join("','")}`
          let titleData = await myAxios.get('陈帅廷查询领料单表头信息', titleParam, 'Q902')
          let APPLYID = titleData.map((el) => el.APPLYID).join(',')
          titleObj.value.applyId = APPLYID
          let APPLYNO = titleData.map((el) => el.APPLYNO).join(',')
          titleObj.value.applyNo = APPLYNO
          // 取出EMP_NAME去重然后用,隔开
          let EMP_NAME = [...new Set(titleData.map((el) => el.EMP_NAME))].join(',')
          titleObj.value.zdr = EMP_NAME
          // let CREATETIME = titleData.map(el => el.CREATETIME).join(',')
          titleObj.value.zdsj = titleData[0].CREATETIME
          // let LASTFINISHDATE = titleData.map(el => el.LASTFINISHDATE).join(',')
          titleObj.value.spsj = titleData[0].LASTFINISHDATE
          // console.log('titleObj :>> ', titleObj)
          let orderParam = `${APPLYID.replace(/,/g, "','")}`
          let orderData = await myAxios.get('陈帅廷查询领料单订单信息', orderParam, 'Q902')
          orderTableData.value = orderData
          // console.log('orderData :>> ', orderData)
          let applyItemParam = `${APPLYID.replace(/,/g, "','")}`
          let applyItemData = await myAxios.get('陈帅廷查询领料单项目', applyItemParam, 'Q902')
          let matcodeParam = applyItemData.map((el) => el.MATCODE).join(',')

          let param = `Q902🈹1007,1008,7001🈹${matcodeParam}🈹X🈹X`
          let functionName = 'SAP库存（单物料）1'
          let returnTab3 = (await myAxios.getSap(functionName, param, '9900')).TableSet['返回表']
          console.log('returnTab3 :>> ', returnTab3)
          for (let i = 0; i < returnTab3.length; i++) {
            let row = returnTab3[i]
            let numb = parseFloat(row['LABST']) // 解析库存数为数字
            // 检查库存数是否大于0
            if (numb > 0) {
              let matcode = row['MATNR']
              let kw = row['LGORT']

              // 在 applyItemData 中查找所有 matcode 匹配的行
              let drs = applyItemData.filter((item) => item.MATCODE === matcode)

              for (let j = 0; j < drs.length; j++) {
                let dr = drs[j]
                // 拼接 SAPQTY 信息
                let sapqtyAddition = kw + ':' + numb.toString().replace(/(\.0*$|0*$)/, '') + ' ;' // 去除末尾的0和小数点
                dr.SAPQTY = (dr.SAPQTY || '') + sapqtyAddition

                // 如果当前行仓位信息不为空
                if (row['LGPBE'] && row['LGPBE'].trim() !== '') {
                  let CW = row['LGPBE']
                  let contentList = (dr.KW || '').split(';').filter(Boolean) // 拆分现有KW并去除空值
                  let isHave = contentList.includes(CW)

                  if (!isHave) {
                    if (dr.KW && dr.KW.trim() !== '') {
                      dr.KW += ';'
                    } else {
                      dr.KW = '' // 确保初始化为字符串
                    }
                    dr.KW += CW
                  }
                }
              }
            }
          }
          applyItemTableData.value = applyItemData
          console.log('applyItemData :>> ', applyItemData)
        })

        return {
          loading,
          titleObj,

          table1Ref,
          orderTableData,

          tableRef,
          topElRef,
          bottomElRef,

          applyItemTableData,
          printEvent,
        }
      },
    })

    app.use(ElementPlus)
    app.use(VxeUI)
    app.use(VxeUITable)
    app.mount('#app')
  </script>
  <style>
    .marginTop10 {
      margin-top: 10px;
    }
    .keyword-highlight {
      background-color: #ffff00;
    }
    :root {
      --vxe-ui-table-border-color: black;
      --vxe-ui-table-border-width: 2px;
    }
  </style>
</html>
